<template>
    <div>
        <table class="table table-bordeaed">
            <tr>
                <td>优惠类型</td>
                <td>优惠标题</td>
                <td>优惠颜色</td>
                <td>数量</td>
                <td>限领</td>
                <td>使用条件</td>
                <td>见面金额</td>
                <td>折扣</td>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>适用门店</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in datas.list" :key="item.id">
                <td>
                    <span v-if="item.type==1">代金券</span>
                    <span v-if="item.type==2">折扣卷</span>
                    <span v-if="item.type==3">兑换卷</span>
                </td>
                <td>{{item.titel}}</td>
                <td>{{item.color}}</td>
                <td>{{item.count}}</td>
                <td>{{item.number}}</td>
                <td>{{item.model}}</td>
                <td>{{item.releaseMoney}}</td>
                <td>{{item.zheKou}}</td>
                <td>{{item.beginTime}}</td>
                <td>{{item.eenTime}}</td>
                <td>
                    <span v-if="item.shopId==0">全部</span>
                    <span v-if="item.shopId==1">八维大酒店</span>
                    <span v-if="item.shopId==2">噢斯卡酒店</span>
                    <span v-if="item.shopId==3">昌平大酒店</span>
                    <span v-if="item.shopId==4">顺义大酒店</span>
                </td>
                <td>操作</td>
            </tr>
        </table>
        <span>总条数{{data.count}}条</span>
        <span>每页{{model.size}}条</span>
        <span>当前{{model.index+'/'+data.page}}页</span>
    </div>
    <div>
        <input type="button" value="首页" @click="GetPage('a')">
        <input type="button" value="上一页" @click="GetPage('b')">
        <input type="button" value="下一页" @click="GetPage('c')">
        <input type="button" value="尾页" @click="GetPage('d')">
    </div>
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import axios from 'axios';

  
  
  //创建一个路由器，实现页面跳转并且传参
  const router = useRouter();
  //创建路由信息对象，用来接受参数
  const route = useRoute();

  onMounted(()=>{
    getList();
    getLists();
  })

  let model =reactive({
    titel:'',
    index:1,
    size:2,
  })

  let datas:any =reactive({
    list:[],
    count:0,
    page:0,
  })

  const getLists=()=>{
    axios({
        url:'https://localhost:7244/api/DisCount/DisCountList',
        method:'get',
        params:model,
    })
    .then((res)=>{
        console.log(res);
        datas.list = res.data.list;
        datas.totalCount = res.data.totalCount;
        datas.totalPage = res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
  }

  const GetPage =(str:any)=>{
    switch(str){
        case 'a':
            if(model.index==1){
                return;
            }
            model.index=1;
            break;

        case 'b':
            if(model.index==1){
                return;
            }
            model.index--;
            break;
        case 'c':
            if(model.index==data.page){
                return;
            }
            model.index++;
            break;
            case 'd':
                if(model.index==datas.page){
                    return;
                }
                model.index = data.page;
                break;
    }
    getLists();
  }

  let queryInfo =reactive({
    shopName:'',
    index:1,
    size: 1000000000,
  })

  let data:any =reactive({
    list:[],
    count:0,
    page:0,
  })

  const getList=()=>{
    axios({
        url:'https://localhost:7244/api/ShopCount/ShopCountShow',
        method:'get',
        params:queryInfo,
    })
    .then((res)=>{
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
  }
</script>

<style scoped>

</style>